<template>
  <div class="app-container">

    <div class="filter-container">
      <el-select v-model="listQuery.orderBy1" clearable style="width: 200px" class="filter-item" placeholder="请选择统计周期">
        <el-option v-for="func in funcOptions" :key="func.value" :label="func.label" :value="func.value" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter1">查看</el-button>
    </div>

    <div class="table-layout">
      <ve-line :extend="activityStatisticsExtend" :data="activityStatisticsData" :settings="activityStatisticsSettings" />
    </div>

    <div class="filter-container">
      <el-select v-model="listQuery.orderBy2" clearable style="width: 200px" class="filter-item" placeholder="请选择统计周期">
        <el-option v-for="func in funcOptions" :key="func.value" :label="func.label" :value="func.value" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter2">查看</el-button>
    </div>
    <div class="table-layout">
      <ve-line :extend="activityOrderExtend" :data="activityOrderData" :settings="activityOrderSettings" />
    </div>
  </div>
</template>

<script>
import { statActivityStatisticsByFunc, statActivityOrderByFunc } from '@/api/stat'
import VeLine from 'v-charts/lib/line'

const defaultFuncOptions = [
  {
    label: '按天',
    value: 'date'
  },
  {
    label: '按周',
    value: 'week'
  },
  {
    label: '按月',
    value: 'month'
  },
  {
    label: '按季度',
    value: 'quarter'
  },
  {
    label: '按年',
    value: 'year'
  }
]

export default {
  components: { VeLine },
  data() {
    return {
      funcOptions: Object.assign({}, defaultFuncOptions),
      activityStatisticsData: {},
      activityStatisticsSettings: {},
      activityStatisticsExtend: {},
      activityOrderData: {},
      activityOrderSettings: {},
      activityOrderExtend: {},
      listQuery: {
        orderBy1: 'date',
        orderBy2: 'date'
      }
    }
  },
  created() {
    this.getactivityStatisticsData()
    this.getactivityOrderData()
  },
  methods: {
    getactivityStatisticsData() {
      statActivityStatisticsByFunc(this.listQuery).then(response => {
        this.activityStatisticsData = response.data.data
        this.activityStatisticsSettings = {
          labelMap: {
            'date': '日期',
            'views': '浏览数',
            'applications': '分享数',
            'shares': '报名数',
            'groupons': '成团数'
          }
        }
        this.activityStatisticsExtend = {
          xAxis: { boundaryGap: true }
        }
      })
    },
    handleFilter1() {
      this.getactivityStatisticsData()
    },
    getactivityOrderData() {
      statActivityOrderByFunc(this.listQuery).then(response => {
        this.activityOrderData = response.data.data
        this.activityOrderSettings = {
          labelMap: {
            'date': '日期',
            'orders': '总订单',
            'vailds': '有效订单',
            'invailds': '无效订单',
            'amount': '收款金额',
            'refundAmount': '退款金额'
          }
        }
        this.activityOrderExtend = {
          xAxis: { boundaryGap: true }
        }
      })
    },
    handleFilter2() {
      this.getactivityOrderData()
    }
  }

}
</script>
